<script type="text/javascript" src="{:U('Index://Public/jsarea')}"></script>
<script>
//var area_json = eval({$list});
var arrArea = new Array();
var arrAreaTitle = new Array();
//var selected = '{$selectedarea}';
var area_selected = "{$_REQUEST['defaultvalue']}";
var area_rid = '<php>if(!empty($_REQUEST['regionid'])){</php>{$_REQUEST['regionid']}<php>}else{</php>current<php>}</php>';
var area_rnm = '<php>if(!empty($_REQUEST['regiondesc'])){</php>{$_REQUEST['regiondesc']}<php>}else{</php>selectarea<php>}</php>';
var pop_select_area = $('#pop_select_area');
//alert(area_selected+" "+area_rid+" "+area_rnm);
//初始化
function area_init(){
		var selectarr = area_selected.split(',');
		//alert(selectarr[0]+" "+selectarr[1]+" "+selectarr[2]);
		$.each( area_json, function(i,n){
			pop_select_area.find("#list_0").append(area_addnode(n));
				if(selectarr[0]==i){
						pop_select_area.find("#node_"+i).attr('class','on');
						arrArea = selectarr;
						arrAreaTitle[0] = n.title;
						pop_select_area.find("#select_0").html(n.title);
						
						$.each( area_json[i]['child'], function(j,m){
							pop_select_area.find("#list_1").append(area_addnode(m));
								if(selectarr[1]==j){
									pop_select_area.find("#node_"+j).attr('class','on');
									arrAreaTitle[1] = m.title;
									pop_select_area.find("#select_"+m.level).html(m.title);
									
									$.each( area_json[j]['child'], function(k,l){
										pop_select_area.find("#list_2").append(area_addnode(l));
										if(selectarr[2]==k){
											pop_select_area.find("#node_"+k).attr('class','on');
											arrAreaTitle[2] = l.title;
											pop_select_area.find("#select_"+l.level).html(l.title);
										}
									});
								}
							});
				}
		});
}

//选择下级地区
function area_select(id,level,title){
	pop_select_area.find("#select_"+level).html(title);
	pop_select_area.find("#node_"+arrArea[level]).attr('class','noon');
	pop_select_area.find("#node_"+id).attr('class','on');
		
		arrArea[level]    = id;
		arrAreaTitle[level]    = title;
		
		level++;
		var jsonchild = area_json;
		//var arrlength = arrArea.length;	
		for(var i=0;i<2;i++){
				if(i>=level-1){
						arrAreaTitle[level] = null;
						var num = i+1;
						pop_select_area.find("#list_"+num).html('');
						pop_select_area.find("#select_"+num).html('');		    	
				}
				if(i<level){
						jsonchild= jsonchild[arrArea[i]].child;
				}
		}
		arrArea.splice(level);
		arrAreaTitle.splice(level);
	
		var html = '';
		if(jsonchild){
				$.each( jsonchild, function(i,n){
				   		html+=area_addnode(n);
				}); 
				pop_select_area.find("#list_"+level).html(html);
		}
}

function area_addnode(n){
	return "<li id='node_"+n.id+"'><a href='javascript:void(0);' onclick=area_select("+n.id+","+n.level+",\'"+n.title+"\') >"+n.title+"</a></li>";
}

function area_save(){
	if(arrArea.length==0){
		alert('请选择地区');
	}else{
		$('#'+area_rid).val(arrArea);
		$('#'+area_rnm).val(arrAreaTitle.join(' '));
		ui.box.close();
	}
}
function area_clear(){
		$('#'+area_rid).val('');
		$('#'+area_rnm).val('');
		ui.box.close();
}
area_init();
</script>
<style>
.ullist{
	list-style-type:none;
	white-space: nowrap;
}

.ullist li{
	margin:5px;
	float:left;
}
.ullist li a{
	margin:1px;
	padding: 0 2px;
}

.ullist .on a{
	margin:0;
	border:1px solid #3385CA;
	background-color: #E0F8F7;
}

</style>
<div style="width:600px;heigh:290px;" id="pop_select_area">
    <div>
      <ul class="ullist" id="list_0">
    
      </ul>
    </div>    
    <div style="clear:both;border-top:1px solid #D1D1D1;height:90px;margin-top:0px;">
      <ul class="ullist" id="list_1">    
      </ul>
    </div> 
    <div style="clear:both;border-top:1px solid #D1D1D1;height:90px;margin-top:0px;">
      <ul class="ullist" id="list_2">    
      </ul>
    </div> 
    <div style="margin-left:10px;margin-top:0px;margin-bottom:3px;color:red;clear:both;text-align:left;" id="selectmessage">
    <span id="select_0" style="margin-left:5px;"></span><span style="margin-left:5px;" id="select_1"></span><span  style="margin-left:5px;" id="select_2"></span>&nbsp;
    </div>
    <div class="answers">
        <input type="button" class="btn_ok" value="确 定"  onclick="area_save()"/>
        <input type="button" class="btn_cancel" value="清 空"  onclick="area_clear()"/>
    </div>
</div>